<template>
    <div class="position">
        <span class="position-icon iconfont">&#xe617;</span>
        <span class="position-text">北京理工大学国防科技园2号楼10层</span>
        <span class="position-notice iconfont">&#xe63f;</span>
    </div>
    <div class="search">
        <span class="iconfont search-icon">&#xe65c;</span>
        <span class="search-text">山姆会员商店优惠商品</span>
    </div>
    <div class="banner">
        <img class="banner-img" :src="banner" />
    </div>
  <div class="menu">
    <div class="menu-item" v-for="item in list" :key="item.text">
      <img class="menu-item-icon" :src="item.imgUrl" />
      <p class="menu-item-text">{{ item.text }}</p>
    </div>
  </div>
  <div class="gap"></div>    
</template>

<script setup>
import { onMounted } from 'vue'
import { useHomeStore } from '@/store/home'
import { storeToRefs } from 'pinia'

const homeStore = useHomeStore()
const { 
    banner,
    list
} = storeToRefs(homeStore)

onMounted(async() => {
   await homeStore.getHomeData()
})
</script>

<style lang="scss" scoped>
@import '@/style/iconfont.css';
.position {
  display: flex;
  padding: 1.6rem 0;
  height: 2.2rem;
  line-height: 2.2rem;
  &-icon {
    font-size: 1.6rem;
    margin-right: .5rem;
  }
  &-text {
    flex: 1;
    font-size: 1.5rem;
    @include ellipsis;
  }
  &-notice {
    font-size: 1.6rem;
    margin-left: auto;
    flex-shrink: 0; 
  }
}
.search {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
    line-height: 3.2rem;
    background: $search-bgColor;
    color: $search-fontColor;
    border-radius: 1.6rem;
    &-icon {
      margin: 0 1rem;
    }
    &-text {
      flex: 1;
    }
}
.banner {
    height: 0;
    overflow: hidden;
    border-radius: .5rem;
    padding-bottom: 29%;
    &-img {
      width: 100%;
      object-fit: cover;
    }
}
.menu {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    &-item {
      width: 20%;
      &-icon {
        display: block;
        width: 4rem;
        height: 4rem;
        margin: 0 auto;
      }
      &-text {
        margin: 0.6rem 0 1.6rem 0;
        text-align: center;
        color: $content-fontcolor;
      }
    }
}
.gap {
    margin: 0 -1.8rem;
    height: 1rem;
    background: $content-bgColor;
}

</style>